<template>
	<!-- <view id="home" :data-theme="theme" :style="[pageStyle]"> -->
	<view>
		<view v-if="isShowDesignPage" class="">
			<!-- 骨架屏 -->
			<tui-skeleton v-if="showSkeleton"></tui-skeleton>
			<!-- 页面配置内容 -->
			<view :class="{ bgf: navIndex > 0 }" :style="{ visibility: showSkeleton ? 'hidden' : 'visible' }">
				<headerSearch class="fixed-search" v-if="showHeaderSerch" :dataConfig="headerSerchCombData"
					@searchQuery="searchQuery" :showHistory="false"></headerSearch>
				<scroll-view scroll-y @scroll="handleScroll"
					:style="`${showHeaderSerch ? 'margin-top: 90rpx;height: calc(100vh - 224rpx);' : 'height: calc(100vh - 140rpx);'}`">
					<view v-if="!errorNetwork">
						<view class="page-index tui-skeleton page_count" :class="{ bgf: navIndex > 0 }">
							<view class="" v-for='(item, index1) in styleConfig'>
								<MySwiper v-if="item.name === 'swiperBg'" :dataConfig="item"></MySwiper>
								<Mylables v-if="item.name === 'lables'" :dataConfig="item"></Mylables>
								<Menus v-if="item.name === 'menus'" :dataConfig="item"></Menus>
								<view class="big-small" v-if="item.name === 'big_small'">
									<view class="nav">
										<text>{{item.titleConfig.val}}</text>
										<view class="btn" @click="goMore(item.linkConfig.val)">
											更多<tui-icon name="arrowright" :size="15"></tui-icon>
										</view>
									</view>
									<view class="grid">
										<view v-for="(item2, index2) in item.newData" :key="index2"
											:id="'media-' + index1 + '-' + index2" @click="goDetail(item2.url)"
											:class="['media-item', { 'full-width': index2 <item.topLength }]">
											<!-- 默认显示图片 -->
											<image v-if="!item2.isPlaying" :src="item2.img" class="media"
												mode="aspectFill">
											</image>
											<!-- 进入中间区域后播放视频 -->
											<view v-else :id="'video-' + index1 + '-' + index2"
												:ref="'videoRef-' + index1 + '-' + index2"
												style="width: 100%; height: 100%; border-radius: 20rpx;"></view>
											<view class="title">
												{{item2.name}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 断网内容 -->
					<view v-else>
						<view class="error-network">
							<image class="img" :src="urlDomain + 'crmebimage/presets/error-network.png'"></image>
							<view class="title">网络连接断开</view>
							<view class="con">
								<view class="label">请检查情况：</view>
								<view class="item">· 在设置中是否已开启网络权限</view>
								<view class="item">· 当前是否处于弱网环境</view>
								<view class="item">· 版本是否过低，升级试试吧</view>
							</view>
							<view class="btn" @click="reconnect">重新连接</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-else class="">
			<view style="width: 100%;display: flex;justify-content: space-between;">
				<view style="display: flex;line-height: 50rpx;">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/images/new.png"></image>
					<text style="margin-left: 10rpx;">{{doGetTabName(tabs[tabIndex]._id).name}}</text>
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in searchDatas" :key="index" @click="onToVideos(item)"
					style="width: 335rpx;text-align: center;padding: 10rpx;">
					<image :src="item.img" style="width: 100%;height: 170rpx;border-radius: 10rpx;" mode="aspectFill">
					</image>
					<view class="text-ellipsis" style="font-size: 26rpx;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<MyUseOut :showModal="isUseOut" @close="isUseOut=false" />
	</view>
</template>

<script>
	// import Cache from "../../utils/cache";
	// import homeComb from "@/components/homeIndex/homeComb";	// +----------------------------------------------------------------------
	// import recommend from "@/components/base/recommend.vue";	// +----------------------------------------------------------------------
	// import seckillData from "@/components/homeIndex/seckill.vue";	// +----------------------------------------------------------------------
	// import menus from "@/components/homeIndex/menus.vue";	// +----------------------------------------------------------------------
	import tuiSkeleton from "@/components/base/tui-skeleton.vue";
	import MySwiper from "@/components/homeIndex/mySwiper.vue";
	import Mylables from "@/components/homeIndex/mylables.vue";
	import headerSearch from "@/components/homeIndex/mySearch.vue"; // +----------------------------------------------------------------------
	// import discover from "@/components/homeIndex/discover";// +----------------------------------------------------------------------
	import homeTitle from "@/components/homeIndex/title";
	import Menus from "@/components/homeIndex/menus.vue";
	import BigSmall from "@/components/homeIndex/bigSmall.vue";
	// import { getIndexData, getTheme, getAppVersion, getCategoryThird, getModuleList } from "@/api/api.js";
	import {
		getModuleList
	} from '@/api/game.js'
	import {
		typeVideos
	} from '@/api/home.js'
	// #ifdef MP-WEIXIN || APP-PLUS
	// import { getTemlIds } from "@/api/api.js";
	// #endif
	// #ifdef H5
	import Hls from "hls.js";
	import Dplayer from "dplayer";
	// #endif
	// import { getShare } from "@/api/public.js";
	// import { mapGetters } from "vuex";
	// import { silenceBindingSpread } from "@/utils/index.js";
	// import animationType from "@/utils/animationType.js";
	// import { goProductDetail } from "../../libs/order";

	const arrTemp = ["beforePay", "afterPay", "createBargain", "pink"];
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
	let app = getApp();
	export default {
		// computed: mapGetters(["isLogin", "uid", "globalData", "bottomNavigationIsCustom"]),
		components: {
			// MyAdvertise,
			tuiSkeleton,
			// seckillData,
			// menus,
			// news,
			Mylables,
			BigSmall,
			MySwiper,
			headerSearch,
			homeTitle,
			Menus
			// discover,
			// homeTitle,
		},
		data() {
			return {
				isShowDesignPage: true, //是否显示后台设计页
				searchDatas: [], //分类搜索出来的列表数据
				videoPlayers: {},
				isUseOut: false,
				// urlDomain: this.$Cache.get("imgHost"),
				urlDomain: ' this.$Cache.get("imgHost")',
				isNoCommodity: false,
				isScrolled: false, //是否开始滚动
				categoryId: 0,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				statusBarHeight: statusBarHeight,
				navIndex: 0, //判断首页显示内容，1显示分类页和商品，0首页
				ProductNavindex: 0,
				sortProduct: [],
				site_name: "", //首页title
				configApi: {}, //分享类容配置
				listActive: 0, // 当前选中项
				theme: app.globalData.theme,
				imgHost: "", //图片域名地址
				appUpdate: {},
				wxText: "点击添加到我的小程序，微信首页下拉即可访问商城。",
				locationContent: "授权位置信息，提供完整服务",
				sortMpTop: 0,
				// #ifdef APP-PLUS || MP
				isFixed: true,
				// #endif
				// #ifdef H5
				isFixed: false,
				// #endif
				domOffsetTop: 50,
				prodeuctTop: 30,
				sortList: [],
				sortMarTop: 0,
				navHeight: 38,
				domHeight: 0,
				cateNavActive: 0,
				couponModal: false,
				styleConfig: [], //DIY数据
				diyId: 0, //DIYID
				smallPage: false, //是否微页面
				isHeaderSerch: false,
				homeCombData: {}, //组合组件数据
				showCateNav: false, //是否显示分类导航组件
				cateNavData: {}, //分类导航组件数据
				showHomeComb: false, //是否显示组合
				showHeaderSerch: false, //是否显示搜索框
				headerSerchCombData: {}, //搜索框对象

				showMySwiper: false, //是否显示轮播图
				mySwiperData: {}, //轮播图对象

				showMyTags: false, //是否显示标签组
				myTagsData: {}, //标签组对象

				showMenus: false, //是否显示导航组
				menusData: {}, //导航组对象
				showBigSmall: false, //是否显示导航组
				bigSmallData: {}, //导航组对象

				isShowTitle: false, //是否显示头部标题，同时也判断是否展示分类下的商品列表
				bgColor: "", //背景颜色
				bgPic: "", //背景图片
				bgTabVal: "", //背景图片样式
				windowHeight: 0,
				pageStyle: {},
				isDefault: 1, //是否首页，1是，0不是
				errorNetwork: false //是否有网络
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			// #ifdef APP-PLUS
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/index/index"
				});
				uni.stopPullDownRefresh();
			}, 1000);
			// #endif
		},
		onLoad(options) {
			// 获取p配置信息
			this.$store.dispatch('getConfig')
			console.log(66666, this.$store.state.config.config.config);
			this.reloadData()
			// #ifdef APP-PLUS
			//app刚进入检测有无网络
			// this.snycNetWork();
			// this.getInitTheme();
			//APP版本检测
			// this.appVersionConfig();
			// #endif
			// 如果是从本页面的MyUseOut弹框进入三种增加次数的页面去了，并且成功后，再跳转到本页面要默认关闭弹窗
			uni.$on('closeModal', data => {
				this.isUseOut = data
			})
			//获取浏览器id
			let diyid = 0;
			if (options.hasOwnProperty("id") || options.scene) {
				if (options.scene) {
					// 仅仅小程序扫码进入
					diyid = this.globalData.id ? this.globalData.id : 0;
				} else {
					diyid = options.id ? options.id : 0;
				}
			}
			//diy数据加载
			this.diyData(diyid, false);

			//首页数据加载
			// this.getIndexConfig();

			let that = this;
			this.$nextTick(function() {
				uni.getSystemInfo({
					success: function(res) {
						that.windowHeight = res.windowHeight;
					}
				});
			});

			//分销关系绑定，分享需要开启分销员开关，才能绑定成功
			// silenceBindingSpread(options, this.isLogin);

			// #ifdef MP || APP-PLUS
			// this.getTemlIds()
			// #endif
		},
		onShow() {
			// 获取设备ID 用户信息
			this.$store.dispatch('getDeviceId')
			const {
				vipTime
			} = this.$store.state.user.user
			// 如果vip到期时间大于当前时间，就可看无限次
			if (vipTime && (new Date(vipTime).getTime() >= new Date().getTime())) {
				uni.setStorageSync('infinite', true)
			} else {
				uni.setStorageSync('infinite', false)
			}
			let self = this;
			// #ifdef APP-PLUS
			setTimeout(() => {
				if (self.appUpdate.openUpgrade == "true") {
					self.appVersionConfig();
				}
			}, 1000);
			// #endif
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit("scroll");
			if (e.scrollTop > this.domOffsetTop) {
				this.isScrolled = true;
			}
			if (e.scrollTop < this.domOffsetTop) {
				this.$nextTick(() => {
					this.isScrolled = false;
				});
			}
		},
		methods: {
			// 搜索分类视频
			searchQuery(val) {
				console.log('受到了', val);
				this.isShowDesignPage = false
				typeVideos({
					type: val,
					page: this.page
				}).then(res => {
					this.searchDatas.push(...res.data.data);
					// this.count = res.data.count;
					uni.stopPullDownRefresh();
				})
			},
			// 前往查看视频
			onToVideos(item) {
				if (!uni.getStorageSync('infinite')) {
					this.isUseOut = true
					return
				}
				uni.navigateTo({
					url: "/pages/watchMovie/videos?id=" + item._id
				})
			},
			goDetail(url) {
				if (!uni.getStorageSync('infinite')) {
					this.isUseOut = true
					return
				}
				// 必须调用ADDuser接口才会有viewsNum和useViewsNum值
				uni.navigateTo({
					url
				})
			},
			goMore(url) {
				uni.navigateTo({
					url
				})
			},
			handleScroll() {
				const query = uni.createSelectorQuery().in(this);
				const windowHeight = uni.getSystemInfoSync().windowHeight;

				this.styleConfig.forEach((section, sectionIndex) => {
					if (section.name === 'big_small') {
						section.newData.forEach((item, index) => {
							const id = `media-${sectionIndex}-${index}`; // 确保 ID 唯一
							query.select(`#${id}`).boundingClientRect((rect) => {
								if (rect) {
									const centerY = rect.top + rect.height / 2;
									const isCenter = centerY > windowHeight * 0.4 && centerY <
										windowHeight * 0.6;

									if (isCenter && !item.isPlaying) {
										this.$set(this.styleConfig[sectionIndex].newData, index, {
											...item,
											isPlaying: true
										});
										this.$nextTick(() => {
											this.initVideoPlayer(
												`video-${sectionIndex}-${index}`, item);
										});
									} else if (!isCenter && item.isPlaying) {
										this.$set(this.styleConfig[sectionIndex].newData, index, {
											...item,
											isPlaying: false
										});
										this.destroyPlayer(`video-${sectionIndex}-${index}`);
									}
								}
							}).exec();
						});
					}
				});
			},
			// 初始化播放器
			initVideoPlayer(idSelector, item) {
				const container = document.getElementById(idSelector);
				if (container) {
					const clips = [
						[60, 70], // 第一个片段：1分钟 - 1分10秒
						[90, 100],
						[120, 130],
						[150, 160],
						[180, 190]
					];

					let currentClipIndex = 0; // 记录当前播放片段索引
					let dp = new Dplayer({
						container: container,
						autoplay: true, // 自动播放
						muted: true, // 静音播放，防止浏览器阻止自动播放
						theme: "#000",
						loop: false, // DPlayer 自己循环，我们自己控制片段循环
						lang: "zh-cn",
						airplay: true,
						screenshot: false,
						hotkey: false,
						preload: "auto", // 预加载
						volume: 0,
						mutex: false, //允许多个播放器同时播放
						video: {
							url: item.video,
							pic: item.img,
							type: "customHls",

							customType: {
								customHls: function(video) {
									if (Hls.isSupported()) {
										const hls = new Hls();
										hls.loadSource(video.src);
										hls.attachMedia(video);
									} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
										video.src = item.video;
									}
								},
							},
							playsInline: true, //允许在内嵌模式下播放
						},
					});
					dp.video.setAttribute("muted", "true");
					dp.video.setAttribute("playsinline", "true");

					dp.on('loadedmetadata', () => {
						dp.video.currentTime = clips[currentClipIndex][0]; // 跳到第一个片段
						dp.play();
					});

					dp.on('timeupdate', () => {
						const currentTime = dp.video.currentTime;
						const [start, end] = clips[currentClipIndex];

						if (currentTime >= end) {
							// 跳转到下一个片段
							currentClipIndex = (currentClipIndex + 1) % clips.length;
							dp.video.currentTime = clips[currentClipIndex][0];
							dp.play();
						}
					});

					this.videoPlayers[idSelector] = dp;

					// 隐藏 DPlayer 的控件
					const dpContainer = container.querySelector('.dplayer-controller');
					if (dpContainer) {
						dpContainer.style.display = 'none';
					}
				}
			},
			// 销毁播放器
			destroyPlayer(idSelector) {
				if (this.videoPlayers[idSelector]) {
					this.videoPlayers[idSelector].destroy();
					delete this.videoPlayers[idSelector];
				}
			},
			getInitTheme() {
				let that = this;
				// 主题变色
				getTheme().then(resP => {
					this.$Cache.set("theme", `theme${Number(resP.data.value)}`);
				});
			},
			// 处理子组件的事件
			handleChildScroll() {
				// 如果需要处理子组件的滚动事件，可以在这里添加逻辑
			},
			//app刚进入检测有无网络
			snycNetWork() {
				uni.getNetworkType({
					success: res => {
						//res.networkType === 'none'无网络
						this.errorNetwork = res.networkType === "none";
						//如果没有网络，清除骨架屏
						if (this.errorNetwork) this.reloadData();
					}
				});
			},
			// 断网后重新链接
			reconnect() {
				uni.getNetworkType({
					success: res => {
						this.errorNetwork = res.networkType === "none";
						if (!this.errorNetwork) {
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index"
								});
							}, 1000);
						}
					}
				});
			},
			/**
			 * 获取DIY
			 * @param {number} id
			 * @param {boolean} type 区分是否是微页面
			 */
			diyData(id, type) {
				let that = this;
				that.styleConfig = [];
				uni.showLoading({
					title: "加载中..."
				});
				getModuleList()
					.then(res => {
						if (res.status != 0) return
						// 取1，默认第2条是首页配置
						let data = res.data.data[1].data || {}

						that.errorNetwork = false;
						// uni.setNavigationBarTitle({
						// 	title: res.data.title
						// });
						that.diyId = data.id;
						that.styleConfig = that.$util.objToArr(data);
						that.pageStyle = {
							"background-color": data.isBgColor === 1 ? data.colorPicker : "",
							"background-image": data.isBgPic === 1 ? `url(${data.bgPic})` : "green",
							"background-repeat": data.bgTabVal === 1 ? "repeat-y" : "no-repeat",
							"background-size": data.bgTabVal === 2 ? "cover" : "contain"
						};
						// uni.hideLoading();
						console.log('页面数据', that.styleConfig);
						if (type) {
							that.styleConfig.forEach(item => {
								if (item.name == "headerSerch" || item.name == "homeComb" || item.name ==
									"tabNav") {
									that.styleConfig.splice(index, 1);
								}
							});
						} else {
							that.styleConfig.forEach(item => {
								if (item.name === "headerSerch") {
									that.showHeaderSerch = true;
									that.headerSerchCombData = item;
								}

								if (item.name === "big_small") {
									item.menuBigConfig = this.transformList(item.menuBigConfig.list);
									item.menuSmallConfig = this.transformList(item.menuSmallConfig.list);
									let newArr = [...item.menuBigConfig, ...item.menuSmallConfig].map(v => ({
										...v,
										showVideo: false, // 默认显示图片
									}));
									this.$set(item, 'topLength', item.menuBigConfig.length)
									this.$set(item, 'newData', newArr)
								}
							});
						}
						setTimeout(() => {
							that.isNodes++;
						}, 100);

					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			// 格式化数据
			transformList(list) {
				const transformedList = [];
				list.forEach(item => {
					const img = item.img;
					const info = item.info;
					for (let i = 0; i < info.length; i += 2) {
						if (i + 1 < info.length) {
							transformedList.push({
								img: img,
								name: info[i].value,
								url: info[i + 1].value,
								video: info[i + 1].video
							});
						}
					}
				});
				return transformedList;
			},
			bindMore() {
				uni.setStorageSync("cateNavActive", this.cateNavActive);
				uni.setStorageSync("categoryId", this.categoryId);
				uni.switchTab({
					url: `/pages/goods_cate/index`
				});
			},
			getRecommendLength(e) {
				this.isNoCommodity = e == 0 ? true : false;
			},
			// 导航分类切换
			changeTab(index, item) {
				//type=0微页面，1分类，2首页
				this.cateNavActive = index;
				if (item.type == 1) {
					this.navIndex = 1;
					if (!item.val) {
						this.sortList = [];
						this.categoryId = 0;
						this.$util.Tips({
							title: "请在平台端选择商品分类！确保加载商品分类数据。"
						});
						return;
					} else {
						getCategoryThird(item.val).then(res => {
							this.sortList = res.data;
							// #ifdef H5
							self.sortMarTop = 10;
							// #endif
						});
						this.categoryId = item.val;
						this.isShowTitle = false;
					}
				} else if (item.type == 0) {
					this.navIndex = 0;
					this.isShowTitle = true;
					this.categoryId = 0;
					if (!item.val) {
						return this.$util.Tips({
							title: "请在平台端选择微页面链接！确保加载微页面数据。"
						});
					} else {
						this.styleConfig = [];
						this.diyData(item.val, true);
					}
				} else {
					this.categoryId = 0;
					this.navIndex = 0;
					this.styleConfig = [];
					this.diyData(item.val, false);
				}
			},
			toNewsList() {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: "/pages/goods/news_list/index"
				});
			},
			//清除骨架屏
			reloadData() {
				this.showSkeleton = false;
			},
			getElementData(el, callback) {
				uni.createSelectorQuery()
					.in(this)
					.selectAll(el)
					.boundingClientRect()
					.exec(data => {
						callback(data[0]);
					});
			},
			xieyiApp() {
				uni.navigateTo({
					url: "/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容"
				});
			},
			// #ifdef APP-PLUS
			xieyiApp() {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: "/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容"
				});
			},
			// #endif
			// #ifdef MP || APP-PLUS
			getTemlIds() {
				for (var i in arrTemp) {
					this.getTem(arrTemp[i]);
				}
			},
			getTem(data) {
				getTemlIds({
					type: data
				}).then(res => {
					if (res.data) {
						let arr = res.data.map(item => {
							return item.tempId;
						});
						wx.setStorageSync("tempID" + data, arr);
					}
				});
			},
			// #endif
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData()
					.then(res => {
						let imgHost = res.data.logoUrl.split("crmebimage")[0];
						that.imgHost = imgHost;
						that.$Cache.set("imgHost", imgHost + "/");
						// #ifdef H5 || APP-PLUS
						that.$store.commit("SET_CHATURL", res.data.yzfUrl);
						Cache.set("chatUrl", res.data.yzfUrl);
						// #endif
						Cache.setItem({
							name: "platChatConfig",
							value: {
								servicePhone: res.data.consumerHotline, //客服电话
								serviceLink: res.data.consumerH5Url, //云智服
								serviceType: res.data.consumerType //客服类型四选一
							}
						});
						this.reloadData();
					})
					.catch(err => {
						return this.$util.Tips({
							title: err
						});
					});
			},
			appVersionConfig() {
				var that = this;
				//app升级
				// 获取本地应用资源版本号
				getAppVersion().then(res => {
					that.$set(that.appUpdate, "androidAddress", res.data.androidAddress);
					that.$set(that.appUpdate, "appVersion", res.data.appVersion);
					that.$set(that.appUpdate, "iosAddress", res.data.iosAddress);
					that.$set(that.appUpdate, "openUpgrade", res.data.openUpgrade);
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						let nowVersion = inf.version.split(".").join("");
						let appVersion = res.data.appVersion.split(".").join("");
						uni.getSystemInfo({
							success: res => {
								if (appVersion > nowVersion) {
									uni.showModal({
										title: "更新提示",
										content: "发现新版本，是否前去下载?",
										showCancel: that.appUpdate.openUpgrade == "1" ?
											true : false,
										cancelColor: "#eeeeee",
										confirmColor: "#FF0000",
										success(response) {
											if (response.confirm) {
												switch (res.platform) {
													case "android":
														plus.runtime.openURL(that
															.appUpdate
															.androidAddress);
														break;
													case "ios":
														plus.runtime.openURL(encodeURI(
															that.appUpdate
															.iosAddress));
														break;
												}
											}
										}
									});
								}
							}
						});
					});
				});
			},
			shareApi: function() {
				getShare().then(res => {
					this.$set(this, "configApi", res.data);
					this.$set(this, "site_name", res.data.title);
					uni.setNavigationBarTitle({
						title: this.site_name
					});
					// #ifdef H5
					this.setOpenShare(res.data);
					// #endif
				});
			},
			// 微信分享；
			setOpenShare: function(data) {
				let that = this;
				if (that.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: location.href,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
						configAppMessage);
				}
			},
			stopTouchMove() {
				return true; //禁止新闻swiper手动滑动
			},
			closeDialog() {
				this.couponModal = false;
				this.$Cache.clear("newGift");
			},
		},
		mounted() {
			// let query = uni.createSelectorQuery().in(this);
			// query.select("#home").boundingClientRect();
			// query.exec(res => {
			// 	this.domHeight = res[0].height;
			// 	console.log(111,this.domHeight);
			// });
		},
		onReachBottom() {
			// this.$refs.recommendIndex.get_host_product();
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.configApi.title,
				imageUrl: this.configApi.img,
				desc: this.configApi.synopsis,
				path: "/pages/index/index"
			};
		}
		// #endif
	};
</script>
<style>
	page {
		padding: 20rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */
	}
</style>
<style lang="scss" scoped>
	.fixed-search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		/* 确保搜索栏在最上层 */
		background-color: #fff;
		/* 根据需要设置背景颜色 */
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影效果 */
	}

	.error-network {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-top: 40rpx;
		background: #fff;
		padding-top: 30%;

		.img {
			width: 414rpx;
			height: 336rpx;
		}

		.title {
			position: relative;
			top: -40rpx;
			font-size: 32rpx;
			color: #666;
		}

		.con {
			font-size: 24rpx;
			color: #999;

			.label {
				margin-bottom: 20rpx;
			}

			.item {
				margin-bottom: 20rpx;
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 508rpx;
			height: 86rpx;
			margin-top: 100rpx;
			border: 1px solid #d74432;
			color: #e93323;
			font-size: 30rpx;
			border-radius: 120rpx;
		}
	}

	.ysize {
		background-size: 100%;
	}

	.fullsize {
		background-size: 100% 100%;
	}

	.repeat {
		background-repeat: repeat;
	}

	.noRepeat {
		background-repeat: no-repeat;
	}

	.noCommodity {
		margin-top: 30%;
	}

	.icon-gengduo1 {
		color: #f8f8f8;
	}

	.pageIndex {
		padding: 0 24rpx;
	}

	.productList {
		background-color: #f5f5f5;
		margin-top: 20rpx;

		// min-height: 70vh;
		.sort {
			width: 710rpx;
			max-height: 380rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 0rpx 0rpx 20rpx 0rpx !important;
			flex-wrap: wrap;
			margin: 25rpx auto 0 auto;

			&.no_pad {
				padding: 0;
			}

			.item {
				width: 20%;
				margin-top: 20rpx;
				text-align: center;

				.pictrues {
					width: 90rpx;
					height: 90rpx;
					background: #f5f5f5;
					border-radius: 50%;
					margin: 0 auto;
				}

				.pictrue {
					width: 90rpx;
					height: 90rpx;
					background: #f5f5f5;
					border-radius: 50%;
					margin: 0 auto;
				}

				.slide-image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				/deep/ .easy-loadimage,
				uni-image,
				.easy-loadimage {
					width: 90rpx;
					height: 90rpx;
					display: inline-block;
				}

				.text {
					color: #272727;
					font-size: 24rpx;
					margin-top: 10rpx;
					// overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.name {
			display: flex;
			align-items: center;

			.name_text {
				display: inline-block;
				max-width: 200rpx;
			}
		}
	}

	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;

		.page_content {

			// background-color: #f5f5f5;
			.swiper {
				position: relative;
				width: 100%;
				height: 246rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 25rpx;
				/* #ifdef MP */
				margin-top: 20rpx;

				/* #endif */
				swiper,
				swiper-item,
				.slide-image,
				image {
					width: 100%;
					height: 246rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, red 50%, #ff5400 100%);
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
	}
</style>